/**
 * Reference: jquery-ui-1.8.16.custom.min.js and libs/jquery/jquery-1.6.2.min.js
 * 
 *                                           注释                   举例........................
 * ----------------------------------------------------------------------------------------------------
 * @param elm:                               DOM元素输入框          text_input
 * @param data_func                          读取数据的函数         function() { ... }
 * @return
 */
function MyDropBox(elm, data_func, options) {
  var pos, div, img, root, size, _self = this;
  var width = (options && options.width) ? options.width : elm.offsetWidth - 2;
  
  this._data_func = data_func;
  this._id = MyUtils.unique();
  this._tracks = [];
  
  root = '';
  $('script').each(function(a, tag) {
    miuScript = $(tag).get(0).src.match(/(.*)mydropbox\.js$/);
    if (miuScript !== null) {
      root = miuScript[1];
    }
  });
  this._root = root;
  
  size = MyUtils.xDocSize();
  this._back = document.createElement('div');
  this._back.style.backgroundImage='url(' + this._root + 'assets/bw.png)';
  this._back.style.backgroundRepeat = 'repeat';
  this._back.style.position = 'absolute';
  this._back.style.top = '0px';
  this._back.style.left = '0px';
  this._back.style.width = size.w + 'px';
  this._back.style.height = size.h + 'px';
  this._back.onclick = function() {
    _self.close.call(_self);
  };
  
  pos = MyUtils.findPos(elm);
  div = document.createElement('div');
  div.id = this._id;
  div.style.width = width + 'px';
  div.style.position = 'absolute';
  div.style.top = pos[1] + elm.offsetHeight + 'px';
  div.style.left = pos[0] + 'px';
  div.style.backgroundColor = '#eeeeee';
  div.style.border = '1px solid #000000';
  div.style.borderTop = 'none';
  this._back.appendChild(div);
  
  document.body.appendChild(this._back);
  this.reset();
};

MyDropBox.prototype.reset = function() {
  var _self = this;
  
  for (var idx in this._tracks) {
    var obj = this._tracks[idx];
    clearTimeout(obj);
  }
  
  this._tracks[this._tracks.length] = setTimeout(function() {
    _self._executeReset.call(_self)
  }, 500);
};

MyDropBox.prototype._executeReset = function(x1, x2) {
  var div, img, table, tr, td, effects, selectedEffect, options;

  this._back.style.display = 'block';
  
  effects = [ 'blind', 'drop', 'fold','puff', 'scale', 'slide' ];
  var index = parseInt(Math.abs(Math.random() * 1000), 10) % effects.length;
  selectedEffect = effects[ index ];
  if ( selectedEffect === "scale" ) {
    options = { percent: 0 };
  }
  
  
  table = document.createElement('table');
  tr = table.insertRow(-1);
  td = tr.insertCell(-1);
  img = document.createElement('img');
  img.src = this._root + 'assets/loading.gif';
  img.style.margin = '5px 10px 5px 20px';
  td.appendChild(img);
  td = tr.insertCell(-1);
  td.appendChild(document.createTextNode('Loading...'));
  $( '#' + this._id ).empty();
  $( '#' + this._id ).append(table);
  $( '#' + this._id ).css('display', 'none');
  $( '#' + this._id ).toggle( selectedEffect, null, 200 );
  
  this._data_func($( '#' + this._id )[0]);
};

MyDropBox.prototype.close = function() {
  this._back.style.display = 'none';
};